<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib prefix="itcast" uri="http://itcast.cn/common/"%>

<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta charset="utf-8">
  <!-- Title and other stuffs -->
  <title>登录日志信息管理</title> 
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="author" content="">
  <!-- Stylesheets -->
  <link href="${pageContext.request.contextPath}/style/bootstrap.css" rel="stylesheet">
  <!-- Font awesome icon -->
  <link rel="stylesheet" href="${pageContext.request.contextPath}/style/font-awesome.css"> 
  <!-- jQuery UI -->
  <link rel="stylesheet" href="${pageContext.request.contextPath}/style/jquery-ui.css"> 
  <!-- Calendar -->
  <link rel="stylesheet" href="${pageContext.request.contextPath}/style/fullcalendar.css">
  <!-- prettyPhoto -->
  <link rel="stylesheet" href="${pageContext.request.contextPath}/style/prettyPhoto.css">  
  <!-- Star rating -->
  <link rel="stylesheet" href="${pageContext.request.contextPath}/style/rateit.css">
  <!-- Date picker -->
  <link rel="stylesheet" href="${pageContext.request.contextPath}/style/bootstrap-datetimepicker.min.css">
  <!-- CLEditor -->
  <link rel="stylesheet" href="${pageContext.request.contextPath}/style/jquery.cleditor.css"> 
  <!-- Uniform -->
  <link rel="stylesheet" href="${pageContext.request.contextPath}/style/uniform.default.css"> 
  <!-- Bootstrap toggle -->
  <link rel="stylesheet" href="${pageContext.request.contextPath}/style/bootstrap-switch.css">
  <!-- Main stylesheet -->
  <link href="${pageContext.request.contextPath}/style/style.css" rel="stylesheet">
  <!-- Widgets stylesheet -->
  <link href="${pageContext.request.contextPath}/style/widgets.css" rel="stylesheet">   
  
  <!-- HTML5 Support for IE -->
  <!--[if lt IE 9]>
  <script src="${pageContext.request.contextPath}/js/html5shim.js"></script>
  <![endif]-->

  <!-- Favicon -->
  <link rel="shortcut icon" href="${pageContext.request.contextPath}/img/favicon/favicon.png">


<style><!--分页样式-->  
.pager { font: 12px Arial, Helvetica, sans-serif;}  
.pager a {padding: 1px 6px; border: solid 1px #ddd; background: #fff; text-decoration: none;margin-right:2px;line-height:30px;vertical-align:middle;}  
.pager .active a{color:red;border:none;}  
.pager a:visited {padding: 1px 6px; border: solid 1px #ddd; background: #fff; text-decoration: none;}  
.pager a:hover {color: #fff; background: #ffa501;border-color:#ffa501;text-decoration: none;}  
.pager .input_li{padding: 1px 6px;}  
</style>  
<script><!--分页跳转脚本-->  
function gotoPage(pageIndex){  
    var queryForm = document.getElementById("queryForm");  
    var action = queryForm.action;  
    var pageSize = document.getElementById("p_pageSizeSelect").value;  
    action += "?pageIndex=" + pageIndex + "&pageSize=" + pageSize;  
    //alert(action);  
    queryForm.action = action;  
    queryForm.submit();  
}  
  
function gotoPageByBtn(){  
    var pageIndex = document.getElementById("p_pageIndex").value;  
    var pageIndexInt = parseInt(pageIndex);  
    var totalPage = ${totalPage};  
      
    if(pageIndexInt>0 && pageIndexInt<totalPage){  
        gotoPage(pageIndex);  
    }  
    else{  
        alert("输入页数超出范围!");  
    }  
}  
</script>

</head>

<body onload="myLoad()">

<%@ include file="../jsp/header.jsp" %>

<!-- Main content starts -->

<div class="content">

<%@ include file="../jsp/adminSidebar.jsp" %>

    <!-- Main bar -->
    <div class="mainbar">
      
      <!-- Page heading -->
      <div class="page-head">
        <h2 class="pull-left"><i class="icon-home"></i> 登录日志信息管理</h2>

        <!-- Breadcrumb -->
        <div class="bread-crumb pull-right">
          <a href="${pageContext.request.contextPath}/IndexServlet"><i class="icon-home"></i> 首页</a> 
          <!-- Divider -->
          <span class="divider">/</span> 
          <a href="#" class="bread-current">控制台</a>
        </div>

        <div class="clearfix"></div>

      </div>
      <!-- Page heading ends -->



      <!-- Matter -->

      <div class="matter">
        <div class="container">

          <div class="row">

	        <!-- Form starts.  -->
	        <form class="form-horizontal" role="form" id="frmLoginLog"
	          action="${pageContext.request.contextPath}/searchLogInfo.action" method="post" >
	          
	          <input type="hidden" id="hidOperateType" name="hidOperateType" value="" />
	          <input type="hidden" id="hidLoginLogId" name="hidLoginLogId" 
	            value="${requestScope.ModifyLoginLog.loginLogId }" />
	          <input type="hidden" id="hidCurrentPageIndex" name="hidCurrentPageIndex" 
              value="${currentPageIndex}" />
            <input type="hidden" id="hidSortField" name="hidSortField" 
              value="${sortField}" />
            <input type="hidden" id="hidSortString" name="hidSortString" 
              value="${sortString}" />
            <input type="hidden" id="hidPageSize" name="hidPageSize" value="${pageSize}" />
	          
            <div class="col-md-12">

              <div class="widget wgreen">
                <div class="widget-head">
                  <div class="pull-left">查询登录日志信息</div>
                  <div class="widget-icons pull-right">
                    <a href="#" class="wminimize"><i class="icon-chevron-down"></i></a> 
                    <a href="#" class="wclose"><i class="icon-remove"></i></a>
                  </div>
                  <div class="clearfix"></div>
                </div>

                <div class="widget-content" style="display:none;" id="search">
                  <div class="padd">
                    <div class="form-group">
                      <label class="col-lg-4 control-label">登录时间</label>
                      <div class="col-lg-3">
                        <input type="text" class="form-control" id="txtSearchLoginDateTimeBegin" name="txtSearchLoginDateTimeBegin" 
                          placeholder="开始时间" value="${search[0].loginTimeBegin }" 
                          onClick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})">
                        <span class="label label-danger" id="spanSearch"></span>
                      </div>
                      <div class="col-lg-3">
                        <input type="text" class="form-control" id="txtSearchLoginDateTimeEnd" name="txtSearchLoginDateTimeEnd" 
                          placeholder="结束时间" value="${search[0].loginTimeEnd }" 
                          onClick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})">
                      </div>
                    </div>
                    <div class="form-group">
                      <label class="col-lg-4 control-label">登录名</label>
                      <div class="col-lg-8">
                        <input type="text" class="form-control" id="txtSearchLoginName" name="txtSearchLoginName" 
                          placeholder="登录名" value="${search[0].loginName }">
                      </div>
                    </div>
                     <div class="form-group">
                      <label class="col-lg-4 control-label">描述</label>
                      <div class="col-lg-8">
                        <input type="text" class="form-control" id="txtSearchEescription" name="txtSearchEescription" 
                          placeholder="描述" value="${search[0].description }">
                      </div>
                    </div>
                    <hr />
                    <div class="form-group">
                      <div class="col-lg-offset-1 col-lg-9">
                        <button class="btn btn-primary" type="reset" onclick="searchLoginLog()">查询</button>
                        <button class="btn btn-default" type="reset" onclick="cancelSearchLoginLog()">取消查询</button>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="widget-foot">
                  <!-- Footer goes here -->
                </div>
              </div>  

            </div>
            
          </form>
          </div>
          <!-- Table -->
            <div class="row">
              <div class="col-md-12">
                <div class="widget">
                <div class="widget-head">
                  <div class="pull-left">登录日志信息表</div>
                  <div class="widget-icons pull-right">
                    <a href="#" class="wminimize"><i class="icon-chevron-up"></i></a> 
                    <a href="#" class="wclose"><i class="icon-remove"></i></a>
                  </div>  
                  <div class="clearfix"></div>
                </div>

                  <div class="widget-content">

                    <table class="table table-striped table-bordered table-hover">
                      <thead>
                        <tr>
                          <th><a href="javascript: sorting('logInfoId')">序号</a></th>
                          <th><a href="javascript: sorting('loginName')">用户名称</a></th>
                          <th><a href="javascript: sorting('loginTime')">登录日志时间</a></th>
                          <th><a href="javascript: sorting('description')">描述</a></th>
                        </tr>
                      </thead>
                      <tbody>
                      <c:forEach items="${itemList}" var="logInfo"> 
                       <%--  begin="${(currentPageIndex - 1) * pageSize}" end="${currentPageIndex * pageSize - 1}" --%>
                        <tr>
                          <td>${logInfo.logInfoId}</td>
                          <td>${logInfo.loginName}</td>
                          <td>
                          <fmt:formatDate value="${logInfo.loginTime}" pattern="yyyy.MM.dd HH:mm:ss"/>
                          </td>
                          <td>${logInfo.description}</td>
                        </tr>
                      </c:forEach>
                      </tbody>
                    </table>
                    
                    <itcast:page url="${pageContext.request.contextPath }/manageLogInfo.action"></itcast:page>
                    
                    <div class="widget-foot">
                    共${rowCount}条数据&nbsp;&nbsp;&nbsp;第${currentPageIndex}/${pageCount}页&nbsp;&nbsp;&nbsp;
                      <input type="radio" name="radPageSize" value="10" 
                        onclick="resize(this.value)" <c:if test="${pageSize == 10}">checked</c:if>>10条/页
                      &nbsp;&nbsp;
                      <input type="radio" name="radPageSize" value="20" 
                        onclick="resize(this.value)" <c:if test="${pageSize == 20}">checked</c:if>>20条/页
                      &nbsp;&nbsp;
                      <input type="radio" name="radPageSize" value="50" 
                        onclick="resize(this.value)" <c:if test="${pageSize == 50}">checked</c:if>>50条/页
                      <ul class="pagination pull-right">
                        <c:if test="${currentPageIndex <= 1}">
	                        <li><a>首页</a></li>
	                        <li><a>上一页</a></li>
                        </c:if>
                        <c:if test="${currentPageIndex > 1}">
	                        <li><a href="javascript: paging(1)">首页</a></li>
	                        <li><a href="javascript: paging(${currentPageIndex - 1})">上一页</a></li>
                        </c:if>
                        <c:if test="${currentPageIndex >= pageCount}">
	                        <li><a>下一页</a></li>
	                        <li><a>尾页</a></li>
                        </c:if>
                        <c:if test="${currentPageIndex < pageCount}">
                          <li><a href="javascript: paging(${currentPageIndex + 1})">下一页</a></li>
                          <li><a href="javascript: paging(${pageCount})">尾页</a></li>
                        </c:if>
                      </ul>
                      <div class="clearfix"></div> 
                    </div>
                  </div>
                </div>
              </div>
            </div>
        </div>
      </div>

      <!-- Matter ends -->

    </div>

   <!-- Mainbar ends -->
   <div class="clearfix"></div>

</div>
<!-- Content ends -->

<%@include file="../jsp/admin_footer.jsp" %>

<!-- Scroll to top -->
<span class="totop"><a href="#"><i class="icon-chevron-up"></i></a></span> 

<!-- JS -->
<script src="${pageContext.request.contextPath}/js/jquery.js"></script> <!-- jQuery -->
<script src="${pageContext.request.contextPath}/js/bootstrap.js"></script> <!-- Bootstrap -->
<script src="${pageContext.request.contextPath}/js/jquery-ui-1.9.2.custom.min.js"></script> <!-- jQuery UI -->
<script src="${pageContext.request.contextPath}/js/fullcalendar.min.js"></script> <!-- Full Google Calendar - Calendar -->
<script src="${pageContext.request.contextPath}/js/jquery.rateit.min.js"></script> <!-- RateIt - Star rating -->
<script src="${pageContext.request.contextPath}/js/jquery.prettyPhoto.js"></script> <!-- prettyPhoto -->

<!-- jQuery Flot -->
<script src="${pageContext.request.contextPath}/js/excanvas.min.js"></script>
<script src="${pageContext.request.contextPath}/js/jquery.flot.js"></script>
<script src="${pageContext.request.contextPath}/js/jquery.flot.resize.js"></script>
<script src="${pageContext.request.contextPath}/js/jquery.flot.pie.js"></script>
<script src="${pageContext.request.contextPath}/js/jquery.flot.stack.js"></script>

<!-- jQuery Notification - Noty -->
<script src="${pageContext.request.contextPath}/js/jquery.noty.js"></script> <!-- jQuery Notify -->
<script src="${pageContext.request.contextPath}/js/themes/default.js"></script> <!-- jQuery Notify -->
<script src="${pageContext.request.contextPath}/js/layouts/bottom.js"></script> <!-- jQuery Notify -->
<script src="${pageContext.request.contextPath}/js/layouts/topRight.js"></script> <!-- jQuery Notify -->
<script src="${pageContext.request.contextPath}/js/layouts/top.js"></script> <!-- jQuery Notify -->
<!-- jQuery Notification ends -->

<script src="${pageContext.request.contextPath}/js/sparklines.js"></script> <!-- Sparklines -->
<script src="${pageContext.request.contextPath}/js/jquery.cleditor.min.js"></script> <!-- CLEditor -->
<script src="${pageContext.request.contextPath}/js/bootstrap-datetimepicker.min.js"></script> <!-- Date picker -->
<script src="${pageContext.request.contextPath}/js/jquery.uniform.min.js"></script> <!-- jQuery Uniform -->
<script src="${pageContext.request.contextPath}/js/bootstrap-switch.min.js"></script> <!-- Bootstrap Toggle -->
<script src="${pageContext.request.contextPath}/js/filter.js"></script> <!-- Filter for support page -->
<script src="${pageContext.request.contextPath}/js/custom.js"></script> <!-- Custom codes -->
<script src="${pageContext.request.contextPath}/js/charts.js"></script> <!-- Charts & Graphs -->

<script src="${pageContext.request.contextPath}/My97DatePicker/WdatePicker.js"></script>

<!-- Script for this page -->
<script type="text/javascript">
$(function () {

    /* Bar Chart starts */

    var d1 = [];
    for (var i = 0; i <= 20; i += 1)
        d1.push([i, parseInt(Math.random() * 30)]);

    var d2 = [];
    for (var i = 0; i <= 20; i += 1)
        d2.push([i, parseInt(Math.random() * 30)]);


    var stack = 0, bars = true, lines = false, steps = false;
    
    function plotWithOptions() {
        $.plot($("#bar-chart"), [ d1, d2 ], {
            series: {
                stack: stack,
                lines: { show: lines, fill: true, steps: steps },
                bars: { show: bars, barWidth: 0.8 }
            },
            grid: {
                borderWidth: 0, hoverable: true, color: "#777"
            },
            colors: ["#ff6c24", "#ff2424"],
            bars: {
                  show: true,
                  lineWidth: 0,
                  fill: true,
                  fillColor: { colors: [ { opacity: 0.9 }, { opacity: 0.8 } ] }
            }
        });
    }

    plotWithOptions();
    
    $(".stackControls input").click(function (e) {
        e.preventDefault();
        stack = $(this).val() == "With stacking" ? true : null;
        plotWithOptions();
    });
    $(".graphControls input").click(function (e) {
        e.preventDefault();
        bars = $(this).val().indexOf("Bars") != -1;
        lines = $(this).val().indexOf("Lines") != -1;
        steps = $(this).val().indexOf("steps") != -1;
        plotWithOptions();
    });

    /* Bar chart ends */

});


/* Curve chart starts */

$(function () {
    var sin = [], cos = [];
    for (var i = 0; i < 14; i += 0.5) {
        sin.push([i, Math.sin(i)]);
        cos.push([i, Math.cos(i)]);
    }

    var plot = $.plot($("#curve-chart"),
           [ { data: sin, label: "sin(x)"}, { data: cos, label: "cos(x)" } ], {
               series: {
                   lines: { show: true, fill: true},
                   points: { show: true }
               },
               grid: { hoverable: true, clickable: true, borderWidth:0 },
               yaxis: { min: -1.2, max: 1.2 },
               colors: ["#1eafed", "#1eafed"]
             });

    function showTooltip(x, y, contents) {
        $('<div id="tooltip">' + contents + '</div>').css( {
            position: 'absolute',
            display: 'none',
            top: y + 5,
            left: x + 5,
            border: '1px solid #000',
            padding: '2px 8px',
            color: '#ccc',
            'background-color': '#000',
            opacity: 0.9
        }).appendTo("body").fadeIn(200);
    }

    var previousPoint = null;
    $("#curve-chart").bind("plothover", function (event, pos, item) {
        $("#x").text(pos.x.toFixed(2));
        $("#y").text(pos.y.toFixed(2));

        if ($("#enableTooltip:checked").length > 0) {
            if (item) {
                if (previousPoint != item.dataIndex) {
                    previousPoint = item.dataIndex;
                    
                    $("#tooltip").remove();
                    var x = item.datapoint[0].toFixed(2),
                        y = item.datapoint[1].toFixed(2);
                    
                    showTooltip(item.pageX, item.pageY, 
                                item.series.label + " of " + x + " = " + y);
                }
            }
            else {
                $("#tooltip").remove();
                previousPoint = null;            
            }
        }
    }); 

    $("#curve-chart").bind("plotclick", function (event, pos, item) {
        if (item) {
            $("#clickdata").text("You clicked point " + item.dataIndex + " in " + item.series.label + ".");
            plot.highlight(item.series, item.datapoint);
        }
    });

});
</script>

<script type="text/javascript">
function checkSearch() {
  var txtSearchLoginDateTimeBegin = document.getElementById("txtSearchLoginDateTimeBegin");
  var txtSearchLoginDateTimeEnd = document.getElementById("txtSearchLoginDateTimeEnd");
  var txtSearchDescription = document.getElementById("txtSearchDescription");
  var txtSearchLoginName = document.getElementById("txtSearchLoginName");
  var spanSearch = document.getElementById("spanSearch");
  
  if (txtSearchLoginDateTimeBegin.value.length == 0 
    && txtSearchLoginDateTimeEnd.value.length == 0 
   /*  || txtSearchDescription.value.length == 0  */
    && txtSearchLoginName.value.length == 0 ) {
    spanSearch.innerHTML = "查询条件不能为空。";
    return false;
  }
  else {
    spanSearch.innerHTML = "";
    return true;
  }
}

function paging(pageIndex) {
  var frmLoginLog = document.getElementById("frmLoginLog");
  var hidOperateType = document.getElementById("hidOperateType");
  var hidCurrentPageIndex = document.getElementById("hidCurrentPageIndex");

  hidCurrentPageIndex.value = pageIndex;
  hidOperateType.value = "paging";
  frmLoginLog.submit();
}

function sorting(sortField) {
  var frmLoginLog = document.getElementById("frmLoginLog");
  var hidOperateType = document.getElementById("hidOperateType");
  var hidSortField = document.getElementById("hidSortField");

  hidSortField.value = sortField;
  hidOperateType.value = "sorting";
  frmLoginLog.submit();
}

function resize(pageSize) {
  var frmLoginLog = document.getElementById("frmLoginLog");
  var hidOperateType = document.getElementById("hidOperateType");
  var hidPageSize = document.getElementById("hidPageSize");

  hidPageSize.value = pageSize;
  hidOperateType.value = "resize";
  frmLoginLog.submit();
} 

function searchLoginLog() {
  if (checkSearch()) {
    var frmLoginLog = document.getElementById("frmLoginLog");
    var hidOperateType = document.getElementById("hidOperateType");
  
    hidOperateType.value = "search";
    frmLoginLog.submit();
  }
}
function cancelSearchLoginLog() {
  var frmLoginLog = document.getElementById("frmLoginLog");
  var txtSearchLoginDateTimeBegin = document.getElementById("txtSearchLoginDateTimeBegin");
  var txtSearchLoginDateTimeEnd = document.getElementById("txtSearchLoginDateTimeEnd");
  var txtSearchDescription = document.getElementById("txtSearchDescription");
  var txtSearchLoginName = document.getElementById("txtSearchLoginName");

  txtSearchLoginDateTimeBegin.value = "";
  txtSearchLoginDateTimeEnd.value = "";
  txtSearchDescription.value = "";
  txtSearchLoginName.value = "";
  hidOperateType.value = "calcelSearch";
  frmLoginLog.submit();
}

function myLoad() {
  ${alertMessage}
}
/* Curve chart ends */
</script>

</body>
</html>